<template>
  <div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center">
        <button @click="$router.back()" class="mr-4 p-2 text-gray-500 hover:text-gray-700 focus:outline-none">
          <ArrowLeftIcon class="h-6 w-6" />
        </button>
        <h2 class="text-2xl font-semibold text-gray-800">借还详情</h2>
      </div>
    </div>

    <div v-if="loading" class="text-center py-8">
      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
      <p class="mt-2 text-gray-500">加载中...</p>
    </div>

    <div v-else-if="borrowRecord" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 基本信息 -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-lg p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-500">设备名称</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentName }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">设备编号</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentCode }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">借用人</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.borrowerName }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">借用日期</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.borrowDate }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">预计归还日期</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.expectedReturnDate }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">实际归还日期</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.actualReturnDate || '-' }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">借用状态</label>
              <span :class="['px-2 inline-flex text-xs leading-5 font-semibold rounded-full', getStatusClass(borrowRecord.status)]">
                {{ getStatusText(borrowRecord.status) }}
              </span>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">借用用途</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.borrowPurpose || '-' }}</p>
            </div>
          </div>
          
          <div class="mt-4">
            <label class="block text-sm font-medium text-gray-500">备注</label>
            <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.remark || '-' }}</p>
          </div>
        </div>
      </div>

      <!-- 设备信息 -->
      <div>
        <div class="bg-white rounded-xl shadow-lg p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">设备信息</h3>
          <div class="space-y-3">
            <div>
              <label class="block text-sm font-medium text-gray-500">设备类别</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentCategory || '-' }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">规格型号</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentSpecification || '-' }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">制造商</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentManufacturer || '-' }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">单价</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.equipmentUnitPrice ? `¥${borrowRecord.equipmentUnitPrice}` : '-' }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500">所属实验室</label>
              <p class="mt-1 text-sm text-gray-900">{{ borrowRecord.laboratoryName || '-' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="text-center py-8">
      <p class="text-gray-500">借还记录不存在</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import request from '@/utils/request'

const route = useRoute()

const loading = ref(false)
const borrowRecord = ref(null)

// 加载借还记录详情
const loadBorrowDetail = async () => {
  try {
    loading.value = true
    const response = await request.get(`/equipment-borrow/${route.params.id}`)
    borrowRecord.value = response.data
  } catch (error) {
    console.error('加载借还记录失败:', error)
    showMessage('加载借还记录失败', 'error')
  } finally {
    loading.value = false
  }
}

// 获取状态样式
const getStatusClass = (status) => {
  const statusMap = {
    'BORROWED': 'bg-yellow-100 text-yellow-800',
    'RETURNED': 'bg-green-100 text-green-800',
    'OVERDUE': 'bg-red-100 text-red-800'
  }
  return statusMap[status] || 'bg-gray-100 text-gray-800'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'BORROWED': '借用中',
    'RETURNED': '已归还',
    'OVERDUE': '已超期'
  }
  return statusMap[status] || status
}

// 消息提示
const showMessage = (message, type = 'info') => {
  const messageEl = document.createElement('div')
  messageEl.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
    type === 'success' ? 'bg-green-500' :
    type === 'warning' ? 'bg-yellow-500' :
    type === 'error' ? 'bg-red-500' :
    'bg-blue-500'
  }`
  messageEl.textContent = message
  document.body.appendChild(messageEl)

  setTimeout(() => {
    if (document.body.contains(messageEl)) {
      document.body.removeChild(messageEl)
    }
  }, 3000)
}

onMounted(() => {
  loadBorrowDetail()
})
</script>
